import React, { useEffect, useState } from 'react';
import { Checkbox, Form, message } from 'antd';
import styles from '../VacationBalance.less';

const Vacation = ({ vacation = [], returnOnChange, companyId }) => {
    const [indeterminate, setIndeterminate] = useState(false); // 当存在值又不是全部的时候
    const [checkAll, setCheckAll] = useState(true); // 全选的状态
    const [curOption, setCurOption] = useState([]); // 当前选项
    const [allOption, setAllOption] = useState([]); // 所有选项值
    const getCheckbox = () =>
        vacation &&
        vacation.map(item => (
            <Checkbox value={item.leaveCode} key={item.leaveCode}>
                <text title={item.leaveName}>{item.leaveName}</text>
            </Checkbox>
        ));

    const initCheckbox = () => {
        const arr = [];
        vacation.map(item => {
            arr.push(item.leaveCode);
            return '';
        });
        setCurOption(arr);
        setAllOption(arr);
        setIndeterminate(false);
        setCheckAll(true);
    };
    const getCurVacation = arr => {
        // console.log(arr);
        const array = [];
        arr.map(item => {
            // eslint-disable-next-line no-unused-expressions
            vacation &&
                vacation.map(list => {
                    if (item === list.leaveCode) {
                        array.push(list);
                    }
                    return '';
                });
            return '';
        });
        returnOnChange(array);
    };
    const onChange = checkedValue => {
        if (checkedValue.length > 0) {
            setCurOption(checkedValue);
            setIndeterminate(!!checkedValue.length && checkedValue.length < allOption.length);
            setCheckAll(checkedValue.length === allOption.length);
            getCurVacation(checkedValue);
        } else {
            message.error('请至少选择一项');
        }
    };
    /**
     * 显示列：全部按钮change事件
     * 应玲莉要求，选中全部列进行全选，再点一次，至少显示一个年假
     */
    const onCheckAllChange = e => {
        setCheckAll(e.target.checked);
        setIndeterminate(!e.target.checked);
        setCurOption(e.target.checked ? allOption : [allOption[0]]);
        getCurVacation(e.target.checked ? allOption : [allOption[0]]);
    };

    useEffect(() => {
        initCheckbox();
    }, [vacation, companyId]);
    return (
        <Form layout="inline" style={{ margin: '8px 0 8px 0' }}>
            <Form.Item label="显示列" className={styles.formItem}>
                <div className={styles.uigroudCheckbox}>
                    <Checkbox
                        checked={checkAll}
                        indeterminate={indeterminate}
                        onChange={onCheckAllChange}
                        className={styles.allCheckbox}
                    >
                        全部
                    </Checkbox>
                    <Checkbox.Group value={curOption} onChange={onChange} className={styles.uiCheckbox}>
                        {getCheckbox()}
                    </Checkbox.Group>
                </div>
            </Form.Item>
        </Form>
    );
};
export default Vacation;
